<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Custom Merging (自定义合并)</title>
		
		<link href="../contents/bootstrap.min.css" rel="stylesheet"/>
		<link href="../contents/wijmo.min.2022.04.22.uat.css" rel="stylesheet"/>
		<style type="text/css">
			.wj-flexgrid {
			  margin-bottom: 12px;
			}
			
			body {
			  margin-bottom: 24px;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div id="grid"></div>
		</div>
	</body>
	<script type="text/javascript" src="../Javascripts/wijmo.min.2022.04.22.uat.js"></script>
	<script type="text/javascript">
		class CustomerMergeManager extends wijmo.grid.MergeManager{
			constructor(flexGrid){
				super(flexGrid);
			}
			
			getMergedRange(panel, r, c, clip=true){
				let rg = new wijmo.grid.CellRange(r,c);
				
				for(let i=rg.col;i<panel.columns.length-1;i++){
					if(panel.getCellData(rg.row,i,true)!= panel.getCellData(rg.row, i+1, true)){
						break;
					}
					rg.col2 = i+1;
				}
				
				for(let i=rg.col;i>0;i--){
					if (panel.getCellData(rg.row, i, true) != panel.getCellData(rg.row, i - 1, true))
					{
						break;
					}
					rg.col = i - 1;
				}
				
				for (var i = rg.row; i < panel.rows.length - 1; i++) {
					if (panel.getCellData(i, rg.col, true) != panel.getCellData(i + 1, rg.col, true))
					{
						break;
					}
					rg.row2 = i + 1;
				}
				for (var i = rg.row; i > 0; i--) {
					if (panel.getCellData(i, rg.col, true) != panel.getCellData(i - 1, rg.col, true))
					{
						break;
					}
					rg.row = i - 1;
				}
				
				return rg;
			}
		}
		
		function setData(p, r, cells) {
		    if (p.cellType == wijmo.grid.CellType.Cell) {
		        p.grid.rowHeaders.setCellData(r, 0, cells[0]);
		    }
		    for (var i = 1; i < cells.length; i++) {
		        p.setCellData(r, i - 1, cells[i]);
		    }
		}
		function centerCell(s, e) {
		    if (e.cell.children.length == 0) {
		        e.cell.innerHTML = '<div>' + e.cell.innerHTML + '</div>';
		        wijmo.setCss(e.cell, {
		            display: 'table',
		            tableLayout: 'fixed'
		        });
		        wijmo.setCss(e.cell.children[0], {
		            display: 'table-cell',
		            textAlign: 'center',
		            verticalAlign: 'middle'
		        });
		    }
		}
		
		document.readyState === "complete"?init():window.onload=init;
		function init() {
		    // create an unbound grid with 5 rows and 7 columns
		    var theGrid = new wijmo.grid.FlexGrid('#grid');
		    while (theGrid.columns.length < 7) {
				theGrid.columns.push(new wijmo.grid.Column());
		    }
		    while (theGrid.rows.length < 5) {
				theGrid.rows.push(new wijmo.grid.Row());
		    }
		    // configure the grid
		    theGrid.mergeManager = new CustomerMergeManager(theGrid);
		    theGrid.formatItem.addHandler(centerCell);
		    theGrid.rowHeaders.columns[0].width = 80;
		    theGrid.rows.defaultSize = 40;
		    theGrid.alternatingRowStep = 0;
		    theGrid.isReadOnly = true;
		    // populate the grid
		    setData(theGrid.columnHeaders, 0, ',Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday'.split(','));
		    setData(theGrid.cells, 0, '12:00,Walker,Morning Show,Morning Show,Sport,Weather,N/A,N/A'.split(','));
		    setData(theGrid.cells, 1, '13:00,Today Show,Today Show,Sesame Street,Football,Market Watch,N/A,N/A'.split(','));
		    setData(theGrid.cells, 2, '14:00,Today Show,Today Show,Kid Zone,Football,Soap Opera,N/A,N/A'.split(','));
		    setData(theGrid.cells, 3, '15:00,News,News,News,News,News,N/A,N/A'.split(','));
		    setData(theGrid.cells, 4, '16:00,News,News,News,News,News,N/A,N/A'.split(','));
		}
	</script>
</html>